<template>
  <div class="p-20 text-center">
    <!-- 按钮区域 -->
    <a-space class="mb-20">
      <a-button @click="startRandom" :disabled="isSelecting">开始随机</a-button>
      <a-button @click="stopSelect" :disabled="!isSelecting">选中当前</a-button>
      <a-button @click="resetAll" :disabled="!userStore.selected.length">重置</a-button>
    </a-space>
    
    <!-- 随机选中显示 -->
    <div class="text-2xl p-2 bg-cyan-600 text-white" :class="{ 'selected': isSelecting }">
      {{ userStore.name || '点击开始' }}
    </div>
    
    <!-- 已选名单 -->
    <div class="selected-list">
      <div v-for="name in userStore.selected" :key="name" class="selected-item">
        {{ name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {useStudentStore} from "@stores/student.js";

const userStore = useStudentStore();
const timer = ref(null);
const isSelecting = ref(false);

// 开始随机选择
const startRandom = () => {
  isSelecting.value = true;
  timer.value = setInterval(() => {
    userStore.randomSelect();
  }, 100);
};

// 停止并确认选中
const stopSelect = () => {
  isSelecting.value = false;
  clearInterval(timer.value);
  userStore.selectConfirm();
};

// 重置所有状态
const resetAll = () => {
  userStore.resetAll();
  isSelecting.value = false;
  clearInterval(timer.value);
};
</script>

<style>
@import "tailwindcss";

</style>
<style scoped>
.current-name {
  padding: 20px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  transition: all 0.3s;
}

.current-name.selected {
  background: #ff0;
  border-color: #ff6600;
}

.selected-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selected-item {
  padding: 8px 12px;
  background: #4CAF50;
  color: white;
  border-radius: 4px;
}
</style>
